@page "/Area_Chart"
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient


<Tabs>
    <TabPane Key="1" Tab="Sample 1">
        <AntDesign.Charts.Area Config="config1" OnFirstRender="onChart1_FirstRender" />
    </TabPane>
    <TabPane Key="2" Tab="Sample 2">
        <AntDesign.Charts.Area Config="config2" OnFirstRender="onChart2_FirstRender" />
    </TabPane>
    <TabPane Key="3" Tab="Sample 3">
        <AntDesign.Charts.Area Config="config3" OnFirstRender="onChart2_FirstRender" />
    </TabPane>
    <TabPane Key="4" Tab="Sample 4">
        <AntDesign.Charts.Area Config="config2" OnFirstRender="onChart2_FirstRender" />
    </TabPane>
</Tabs>


<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <AntDesign.Charts.Area @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }

    #region Sample 1

    private async Task onChart1_FirstRender(IChartComponent chart)
    {
        var data1 = await DemoData.TimePeriodDataAsync(NavigationManager, HttpClient);
        await chart.ChangeData(data1);
    }

    AreaConfig config1 = new AreaConfig()
    {
        XField = "timePeriod",
        YField = "value",
        XAxis = new ValueCatTimeAxis()
        {
            Range = new[] { 0, 1 }
        }
    };

    #endregion

    #region Sample 2

    private async Task onChart2_FirstRender(IChartComponent chart)
    {
        var data = await DemoData.FireworksSalesAsync(NavigationManager, HttpClient);
        await chart.ChangeData(data);
    }

    AreaConfig config2 = new AreaConfig()
    {
        XField = "Date",
        YField = "scales",
        XAxis = new ValueCatTimeAxis()
        {
            Range = new[] { 0, 1 },
            TickCount = 5
        },
        AreaStyle = new GraphicStyle()
        {
            Fill = "l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff"
        }
    };

    #endregion

    #region Sample 3

    AreaConfig config3 = new AreaConfig()
    {
        XField = "Date",
        YField = "scales",
        XAxis = new ValueCatTimeAxis()
        {
            TickCount = 5
        },
        Animation = false,
        Slider = new Slider()
        {
            Start = 0.1,
            End = 0.9,
            TrendCfg = new TrendCfg()
            {
                IsArea = true
            }
        }
    };

    #endregion
}



